Bootstrap 5 এর ট্যাবস এবং একর্ডিয়ন (Accordion)

Web Development - বুটস্ট্রাপ (Bootstrap 5) -

বুটস্ট্রাপ ৫ এ ট্যাবস (Tabs) এবং একর্ডিয়ন (Accordion) হল দুটি শক্তিশালী উপাদান, যা ওয়েব পেজে বিভিন্ন কন্টেন্ট অংশের মধ্যে স্যুইচিং বা এক্সপ্যান্ড/কলাপ্স কার্যক্রম সঞ্চালিত করতে ব্যবহৃত হয়। এই উপাদানগুলির মাধ্যমে ব্যবহারকারী সহজেই বিভিন্ন কন্টেন্টের মধ্যে নেভিগেট করতে পারে বা কন্টেন্টের আংশিকভাবে দেখার সুবিধা পায়।

ট্যাবস (Tabs)

ট্যাবস হল এমন একটি ইন্টারফেস উপাদান যা একাধিক কন্টেন্ট অংশকে একসাথে ধারণ করে, এবং ব্যবহারকারী ট্যাবগুলির মধ্যে স্যুইচ করার মাধ্যমে আলাদা আলাদা কন্টেন্ট দেখতে পারে। বুটস্ট্রাপ ৫ এ ট্যাবস সঠিকভাবে কাজ করার জন্য nav এবং tab-content ক্লাস ব্যবহৃত হয়।

উদাহরণ: বুটস্ট্রাপ ৫ এর ট্যাবস

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabs Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-4">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">হোম</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">প্রোফাইল</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">যোগাযোগ</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <h5>হোম ট্যাব</h5>
                <p>এটি হোম ট্যাবের কন্টেন্ট।</p>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <h5>প্রোফাইল ট্যাব</h5>
                <p>এটি প্রোফাইল ট্যাবের কন্টেন্ট।</p>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <h5>যোগাযোগ ট্যাব</h5>
                <p>এটি যোগাযোগ ট্যাবের কন্টেন্ট।</p>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

এখানে:

nav-tabs: ট্যাবগুলো তৈরি করার জন্য ব্যবহার করা হয়।
tab-content: ট্যাবের কন্টেন্টের জন্য ব্যবহৃত ক্লাস।
tab-pane: প্রতিটি ট্যাবের কন্টেন্টের জন্য আলাদা সেকশন।
data-bs-toggle="tab": ট্যাব স্যুইচ করার জন্য ব্যবহৃত অ্যাট্রিবিউট।
show active: যে ট্যাবটি প্রথমে সক্রিয় থাকবে, সেটি এই ক্লাসে থাকে।

একর্ডিয়ন (Accordion)

একর্ডিয়ন হলো একটি উপাদান যা একাধিক সেকশনকে হ্যান্ডেল করার জন্য ব্যবহৃত হয়, যেখানে প্রতি সেকশন কেবল তখনই খোলা হয় যখন তা নির্বাচিত হয়। একর্ডিয়ন ব্যবহারে ব্যবহারকারী একযোগে একাধিক সেকশন দেখতে পারে, তবে শুধুমাত্র একটি সেকশন একসাথে খোলা থাকে। বুটস্ট্রাপ ৫ এর একর্ডিয়ন উপাদানটি accordion ক্লাস ব্যবহার করে তৈরি করা হয়।

উদাহরণ: বুটস্ট্রাপ ৫ এর একর্ডিয়ন

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-4">
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        একর্ডিয়ন সেকশন ১
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        এটি একর্ডিয়ন সেকশন ১ এর কন্টেন্ট।
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        একর্ডিয়ন সেকশন ২
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        এটি একর্ডিয়ন সেকশন ২ এর কন্টেন্ট।
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        একর্ডিয়ন সেকশন ৩
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        এটি একর্ডিয়ন সেকশন ৩ এর কন্টেন্ট।
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

এখানে:

accordion: একর্ডিয়ন কম্পোনেন্টের মূল কন্টেইনার।
accordion-item: একর্ডিয়ন সেকশনগুলির প্রতিটি আইটেম।
accordion-button: একর্ডিয়ন সেকশনটি টগল করতে ব্যবহৃত বাটন।
accordion-collapse: একর্ডিয়ন সেকশনটি কোলাপ্স/এক্সপ্যান্ড হওয়া কন্টেন্টের অংশ।
data-bs-toggle="collapse": একর্ডিয়ন সেকশন টগল করার জন্য অ্যাট্রিবিউট।
data-bs-parent="#accordionExample": একর্ডিয়নের parent কন্টেইনারের সাপোর্ট করে সেকশনগুলিকে একসাথে কোলাপ্স করতে সাহায্য করে।

সারাংশ

বুটস্ট্রাপ ৫ এর ট্যাবস (Tabs) এবং একর্ডিয়ন (Accordion) ব্যবহারে আপনি অত্যন্ত সহজভাবে কন্টেন্ট স্যুইচিং এবং এক্সপ্যান্ড/কলাপ্স কার্যক্রম প্রদান করতে পারেন। ট্যাবস ব্যবহারকারীদের একাধিক কন্টেন্ট অংশের মধ্যে স্যুইচ করার সুযোগ দেয়, যখন একর্ডিয়ন একটি ওয়েব পৃষ্ঠার মধ্যে একাধিক কন্টেন্ট সেকশনকে সুন্দরভাবে কোলাপ্স/এক্সপ্যান্ড করার সুবিধা দেয়।

Content added By

Md Azizur Rahman

বুটস্ট্রাপ ৫-এ ট্যাব নেভিগেশন ব্যবহার করা খুবই সহজ এবং এটি ওয়েব পেজে একাধিক কনটেন্ট ভিউ সুইচ করতে ব্যবহৃত হয়। সাধারণত ট্যাব নেভিগেশন ড্যাশবোর্ড বা কনটেন্ট সেকশনের মধ্যে দ্রুত পরিবর্তন করার জন্য ব্যবহৃত হয়। বুটস্ট্রাপ ৫-এ nav এবং tab-content এর মাধ্যমে ট্যাব নেভিগেশন তৈরি করা হয়।

ট্যাব নেভিগেশন তৈরির উপাদান

nav ক্লাস: এটি ট্যাব নেভিগেশন বানানোর জন্য ব্যবহৃত হয়। nav ক্লাসের মধ্যে ট্যাবের লিংকগুলো থাকে।
tab-content ক্লাস: এখানে ট্যাবের কন্টেন্ট থাকে, যা নির্দিষ্ট ট্যাব সিলেক্ট করলে প্রদর্শিত হবে।

উদাহরণ: বুটস্ট্রাপ ৫ এর ট্যাব নেভিগেশন

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Navigation Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">হোম</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">প্রোফাইল</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">যোগাযোগ</a>
    </li>
  </ul>

  <!-- Tab content -->
  <div class="tab-content mt-3" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      <h5>হোম কন্টেন্ট</h5>
      <p>এটি হোম ট্যাবের কন্টেন্ট। এখানে আপনি হোম সম্পর্কিত সব কিছু দেখতে পারেন।</p>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <h5>প্রোফাইল কন্টেন্ট</h5>
      <p>এটি প্রোফাইল ট্যাবের কন্টেন্ট। এখানে আপনি আপনার প্রোফাইল সম্পর্কিত তথ্য দেখতে পারবেন।</p>
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      <h5>যোগাযোগ কন্টেন্ট</h5>
      <p>এটি যোগাযোগ ট্যাবের কন্টেন্ট। এখানে আপনি আমাদের সাথে যোগাযোগের তথ্য পাবেন।</p>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

ব্যাখ্যা:

nav nav-tabs: এই ক্লাসটি ট্যাব নেভিগেশন তৈরি করে। এখানে nav ক্লাসের সাথে nav-tabs ক্লাসটি ব্যবহার করা হয়েছে যা ট্যাবগুলোর আন্ডারলাইন (ব্রাউজার স্টাইল) এবং ডিজাইন নির্ধারণ করে।
data-bs-toggle="tab": এই অ্যাট্রিবিউটটি ট্যাবের ক্লিক ইভেন্টকে ট্রিগার করে, যা ট্যাবের কন্টেন্ট সিলেক্ট করবে।
tab-content: এখানে ট্যাবের কন্টেন্ট প্রদর্শিত হয়, যা ট্যাব সিলেক্ট করার সাথে পরিবর্তিত হয়।
tab-pane: এই ক্লাসটি ট্যাবের মধ্যে থাকা কন্টেন্টকে নির্ধারণ করে। show active ক্লাসগুলো প্রথমে সক্রিয় ট্যাবের কন্টেন্টকে দেখাবে।

ট্যাব নেভিগেশন কাস্টমাইজেশন

ট্যাব নেভিগেশন স্টাইল কাস্টমাইজ করা:

আপনি nav-tabs ক্লাসের সাথে nav-pills ক্লাস ব্যবহার করে ট্যাব নেভিগেশনকে পিল-স্টাইলেও কাস্টমাইজ করতে পারেন। এটি ট্যাবগুলোর ডিজাইন পরিবর্তন করবে এবং আরো আধুনিক দেখাবে।

<ul class="nav nav-pills" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">হোম</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">প্রোফাইল</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">যোগাযোগ</a>
  </li>
</ul>

ট্যাবের জন্য ডিফল্ট একটিভ ক্লাস পরিবর্তন:

আপনি ট্যাবের মধ্যে যেকোনো একটিকে ডিফল্ট ভাবে সক্রিয় করতে পারেন, যেমন:

<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home">হোম</a>

এখানে active ক্লাসটি নির্ধারণ করে যে কোন ট্যাবটি প্রথমে প্রদর্শিত হবে।

উপসংহার

বুটস্ট্রাপ ৫ এর ট্যাব নেভিগেশন খুবই সহজ এবং কার্যকরী একটি উপাদান। এটি ব্যবহারকারীদের একাধিক কনটেন্ট ভিউতে দ্রুত পরিবর্তন করতে সাহায্য করে এবং ওয়েবসাইটে একটি পরিষ্কার নেভিগেশন ব্যবস্থা তৈরি করে।

Content added By

Md Azizur Rahman

Dynamic Tab Content এবং Tabs Styling

বুটস্ট্রাপ ৫ এর ট্যাব (Tabs) উপাদানটি একটি নেভিগেশন উপাদান, যা একাধিক কন্টেন্ট বা প্যানেলগুলোকে স্যুইচ করার জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীদের একাধিক কন্টেন্ট এক জায়গায় দেখানোর সুযোগ দেয়, যেখানে প্রতিটি ট্যাব ক্লিক করার মাধ্যমে সংশ্লিষ্ট কন্টেন্ট দেখানো হয়।

এখানে আমরা ডাইনামিক ট্যাব কন্টেন্ট এবং ট্যাব স্টাইলিং নিয়ে বিস্তারিত আলোচনা করব।

ডাইনামিক ট্যাব কন্টেন্ট (Dynamic Tab Content)

ডাইনামিক ট্যাব কন্টেন্ট তৈরি করার জন্য, আপনি JavaScript বা jQuery ব্যবহার করে কন্টেন্ট পরিবর্তন করতে পারেন। এতে ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে কন্টেন্ট পরিবর্তন হবে, যেমন, যখন একটি ট্যাব ক্লিক হবে, তখন সংশ্লিষ্ট কন্টেন্ট দেখানো হবে।

উদাহরণ: ডাইনামিক ট্যাব কন্টেন্ট

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Tab Content</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <ul class="nav nav-tabs" id="myTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">হোম</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">প্রোফাইল</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">যোগাযোগ</a>
        </li>
    </ul>
    <div class="tab-content mt-3" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <h5>হোম কন্টেন্ট</h5>
            <p>এটি হোম ট্যাবের কন্টেন্ট। আপনি এখানে যে তথ্য চান তা দেখাতে পারেন।</p>
        </div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <h5>প্রোফাইল কন্টেন্ট</h5>
            <p>এটি প্রোফাইল ট্যাবের কন্টেন্ট। এখানে ব্যবহারকারীর প্রোফাইল সম্পর্কিত তথ্য দেখানো হবে।</p>
        </div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            <h5>যোগাযোগ কন্টেন্ট</h5>
            <p>এটি যোগাযোগ ট্যাবের কন্টেন্ট। এখানে যোগাযোগের তথ্য বা ফর্ম প্রদর্শন করা হবে।</p>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

এখানে:

data-bs-toggle="tab": এই অ্যাট্রিবিউটটি নির্ধারণ করে যে ট্যাবটি ট্যাব কন্টেন্ট পরিবর্তন করতে সক্ষম হবে।
tab-content: এটি একটি কনটেইনার যেখানে সব ট্যাব কন্টেন্ট থাকে।
tab-pane: প্রতিটি ট্যাব কন্টেন্টের জন্য আলাদা প্যানেল। এটি ট্যাবের সাথে যুক্ত হয় এবং ক্লিক করলে প্রদর্শিত হয়।

ট্যাব স্টাইলিং (Tab Styling)

বুটস্ট্রাপ ৫ এ ট্যাবের ডিজাইন এবং স্টাইল কাস্টমাইজ করা খুব সহজ। আপনি ট্যাবের রঙ, প্যাডিং, বর্ডার এবং অন্যান্য স্টাইলিং শৈলী পরিবর্তন করতে পারেন।

উদাহরণ: কাস্টম ট্যাব স্টাইলিং

<style>
  .nav-tabs .nav-link {
    border: 2px solid transparent;
    border-radius: 10px;
    margin-right: 10px;
  }
  
  .nav-tabs .nav-link.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
  }

  .nav-tabs .nav-link:hover {
    background-color: #e9ecef;
    color: #0d6efd;
  }

  .tab-content {
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>

এখানে:

.nav-tabs .nav-link: প্রতিটি ট্যাব লিঙ্কের জন্য স্টাইল, যেমন বর্ডার এবং মার্জিন।
.nav-tabs .nav-link.active: এটি সক্রিয় ট্যাবের জন্য স্টাইল, যেমন ব্যাকগ্রাউন্ড রঙ এবং বর্ডার কালার পরিবর্তন করা।
.tab-content: ট্যাব কন্টেন্টের জন্য প্যাডিং এবং ব্যাকগ্রাউন্ড রঙ দেওয়া হয়েছে।

ডাইনামিক ট্যাব কন্টেন্টের জন্য জাভাস্ক্রিপ্ট

ডাইনামিক কন্টেন্ট আপডেট করতে, আপনি JavaScript ব্যবহার করতে পারেন। যেমন, আপনি একটি ট্যাব ক্লিক করলে ট্যাব কন্টেন্ট ডাইনামিকভাবে লোড করতে পারেন:

// ডাইনামিক ট্যাব কন্টেন্ট লোড করা
document.getElementById("home-tab").addEventListener("click", function() {
    document.getElementById("home").innerHTML = "<p>এই কন্টেন্টটি ডাইনামিকভাবে লোড করা হয়েছে!</p>";
});

এটি তখন ব্যবহার হবে যখন আপনি একটি ট্যাব ক্লিক করবেন এবং ট্যাব কন্টেন্ট পরিবর্তন করতে চাইবেন।

সারাংশ

বুটস্ট্রাপ ৫ এর ট্যাব উপাদান ব্যবহার করে আপনি সহজে ডাইনামিক ট্যাব কন্টেন্ট তৈরি করতে পারেন এবং স্টাইলিং কাস্টমাইজ করে আপনার ওয়েবসাইটের ডিজাইনকে আরও উন্নত করতে পারেন। ট্যাব ইভেন্টগুলোর মাধ্যমে আপনি ট্যাব কন্টেন্টকে ডাইনামিকভাবে আপডেট করতে পারবেন এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারবেন।

Content added By

Md Azizur Rahman

Accordion তৈরি এবং কনফিগার করা

অ্যাকর্ডিয়ন একটি অত্যন্ত জনপ্রিয় এবং কার্যকরী উপাদান, যা এক বা একাধিক কন্টেন্ট প্যানেলকে ধীরে ধীরে খুলে এবং বন্ধ করে প্রদর্শন করতে সাহায্য করে। এটি সাধারণত ব্যবহার করা হয় যখন আপনাকে অনেক তথ্য একটি নির্দিষ্ট জায়গায় সংগঠিতভাবে প্রদর্শন করতে হয়, যাতে ব্যবহারকারীরা সহজে ঐতিহাসিক তথ্য বা প্রশ্নোত্তর দেখতে পারেন। বুটস্ট্রাপ ৫ এ অ্যাকর্ডিয়ন তৈরি করা সহজ এবং এর কাস্টমাইজেশন অত্যন্ত সুবিধাজনক।

অ্যাকর্ডিয়ন তৈরি করার উপাদান

Accordion Container: অ্যাকর্ডিয়নের মূল কন্টেইনার, যেখানে সমস্ত প্যানেল থাকবে।
Accordion Item: অ্যাকর্ডিয়নের প্রতিটি প্যানেল।
Accordion Header: প্যানেলটির শিরোনাম, যা ক্লিক করলে প্যানেলটি খোলে বা বন্ধ হয়।
Accordion Body: প্যানেলটির কন্টেন্ট, যা খুললে দেখা যাবে।

উদাহরণ: বুটস্ট্রাপ ৫ অ্যাকর্ডিয়ন

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Accordion Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    প্রথম প্রশ্ন
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    এটি একটি অ্যাকর্ডিয়ন প্যানেলের কন্টেন্ট। আপনি এখানে আপনার উত্তর বা অতিরিক্ত তথ্য রাখতে পারেন।
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    দ্বিতীয় প্রশ্ন
                </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    এটি দ্বিতীয় প্রশ্নের উত্তর। অ্যাকর্ডিয়ন প্যানেলগুলো খুব সহজেই কনফিগার করা যায়।
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    তৃতীয় প্রশ্ন
                </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    এই প্যানেলেও আপনি আপনার কন্টেন্ট রাখতে পারবেন। অ্যাকর্ডিয়ন উপাদানটি ব্যবহারকারীকে কন্টেন্টের মাধ্যমে দ্রুত নেভিগেট করতে সাহায্য করে।
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

ব্যাখ্যা:

accordion: এটি অ্যাকর্ডিয়নের কন্টেইনার। সমস্ত প্যানেল একত্রে এখানে থাকবে।
accordion-item: প্রতিটি প্যানেলকে একটি আইটেম হিসাবে ডিফাইন করা হয়।
accordion-button: প্রতিটি প্যানেলের শিরোনাম যা ক্লিক করলে প্যানেলটি খুলবে বা বন্ধ হবে।
accordion-collapse: প্যানেলের কন্টেন্ট। এটি তখনই দৃশ্যমান হবে যখন ব্যবহারকারী শিরোনামে ক্লিক করবে।
collapse show: collapse ক্লাস দ্বারা প্যানেলটি প্রথমে বন্ধ থাকে, এবং show ক্লাস দ্বারা প্যানেলটি খুলে থাকে।

অ্যাকর্ডিয়ন কনফিগারেশন

বুটস্ট্রাপ ৫-এ অ্যাকর্ডিয়নটি সহজে কনফিগার করা যায়। নিচে কিছু কাস্টমাইজেশন এবং কনফিগারেশন এর উদাহরণ দেয়া হল:

একাধিক প্যানেল একসাথে খোলা:

যদি আপনি চান যে একাধিক প্যানেল একসাথে খোলা থাকতে পারে, তাহলে data-bs-parent এট্রিবিউটটি ব্যবহার না করে প্রতিটি প্যানেল আলাদাভাবে খুলতে পারবেন।

<div class="accordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                প্রথম প্রশ্ন
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show">
            <div class="accordion-body">
                এটি প্রথম প্যানেলের কন্টেন্ট।
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                দ্বিতীয় প্রশ্ন
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse">
            <div class="accordion-body">
                দ্বিতীয় প্যানেলের কন্টেন্ট।
            </div>
        </div>
    </div>
</div>

এখানে data-bs-parent উপাদানটি বাদ দিয়ে প্রতিটি প্যানেল স্বাধীনভাবে খোলা বা বন্ধ হতে পারে।

সারাংশ

বুটস্ট্রাপ ৫-এ অ্যাকর্ডিয়ন ব্যবহার করে আপনি সুন্দরভাবে এবং ইন্টারেকটিভভাবে বিভিন্ন ধরনের কন্টেন্ট প্রদর্শন করতে পারেন। এটি রেসপন্সিভ এবং কাস্টমাইজযোগ্য, এবং ব্যবহারকারীকে প্রয়োজনীয় তথ্য দ্রুত প্রদর্শনের জন্য উপকারী। আপনি এটি যেকোনো ওয়েবসাইটে ব্যবহার করে দেখতে পারেন, যেমন FAQ সেকশন, প্রোডাক্ট বৈশিষ্ট্য, বা অন্যান্য ধরণের প্রশ্নোত্তর সিস্টেম।

Content added By

Md Azizur Rahman

Accordion এর জন্য Multiple Panels ব্যবস্থাপনা

বুটস্ট্রাপ ৫ এর একোর্ডিয়ন (Accordion) একটি অত্যন্ত জনপ্রিয় উপাদান যা ব্যবহারকারীদের একাধিক কন্টেন্ট প্যানেল সঞ্চালন করতে সহায়তা করে। একোর্ডিয়ন প্যানেলগুলিকে সাধারণত "খোলা" এবং "বন্ধ" করা যায়। যদি আপনি চান যে এক সময়ে শুধুমাত্র একটি প্যানেল খোলা থাকে, তাহলে Multiple Panels Management করতে হবে। বুটস্ট্রাপ ৫ এ একোর্ডিয়ন প্যানেলগুলোর মধ্যে একটিকে একাধিক প্যানেল রোল-আপ বা রোল-ডাউন করার মাধ্যমে ব্যবস্থাপনা করা যায়।

বুটস্ট্রাপ ৫ এর একোর্ডিয়ন উপাদানটি এমনভাবে তৈরি করা হয়েছে যে, একে ব্যবহার করলে স্বয়ংক্রিয়ভাবে একাধিক প্যানেল পরিচালনা করা সহজ হয়ে যায়।

একোর্ডিয়ন মাল্টিপল প্যানেল ব্যবস্থাপনা উদাহরণ

বুটস্ট্রাপ ৫ এর accordion কম্পোনেন্ট ব্যবহার করে আপনি সহজেই একাধিক প্যানেল নিয়ে কাজ করতে পারবেন, যেখানে এক সময়ে শুধুমাত্র একটি প্যানেল খোলা থাকবে। নিচে একটি উদাহরণ দেওয়া হল:

উদাহরণ: একোর্ডিয়ন মাল্টিপল প্যানেল ব্যবস্থাপনা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion with Multiple Panels</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <div class="accordion" id="accordionExample">
        <!-- প্রথম প্যানেল -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    প্যানেল ১
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    এটি প্যানেল ১ এর কন্টেন্ট। এখানে আপনি যেকোনো তথ্য বা উপাদান রাখতে পারেন।
                </div>
            </div>
        </div>
        <!-- দ্বিতীয় প্যানেল -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    প্যানেল ২
                </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    এটি প্যানেল ২ এর কন্টেন্ট। এই প্যানেলটি শুধুমাত্র তখনই প্রদর্শিত হবে যখন এটি খোলা হবে।
                </div>
            </div>
        </div>
        <!-- তৃতীয় প্যানেল -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    প্যানেল ৩
                </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    এটি প্যানেল ৩ এর কন্টেন্ট। একে খোলার জন্য শুধু প্যানেলটিতে ক্লিক করুন।
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

ব্যাখ্যা:

data-bs-parent="#accordionExample": এই অ্যাট্রিবিউটটি নিশ্চিত করে যে একোর্ডিয়নটির একটি প্যানেল খোলার সাথে অন্য প্যানেলটি বন্ধ হয়ে যাবে। এটি Accordion কম্পোনেন্টের মাল্টিপল প্যানেল ব্যবস্থাপনা করার জন্য গুরুত্বপূর্ণ। এখানে #accordionExample হচ্ছে একোর্ডিয়নের মূল কন্টেইনারের আইডি।
collapse এবং show: প্রথম প্যানেলে collapse show ক্লাসটি দেওয়া হয়েছে, যার মানে এই প্যানেলটি ডিফল্টভাবে খোলা থাকবে। অন্যান্য প্যানেলে শুধু collapse ক্লাসটি রয়েছে, যা তাদের বন্ধ অবস্থায় রাখে।
accordion-button: প্রতিটি প্যানেলের হেডারে এই বাটন থাকে, যা ক্লিক করলে প্যানেলটি খোলে বা বন্ধ হয়।

টিপস:

collapsed ক্লাস: এই ক্লাসটি প্যানেল বন্ধ অবস্থায় রাখে। আপনি যখন প্যানেলটিকে খোলার জন্য চাইবেন, তখন এই ক্লাসটি স্বয়ংক্রিয়ভাবে সরিয়ে দেওয়া হবে।
aria-expanded="true/false": এই অ্যাট্রিবিউটটি প্যানেল খোলা বা বন্ধ থাকার অবস্থান নির্দেশ করে। প্যানেলটি খোলা থাকলে এটি true এবং বন্ধ থাকলে false থাকবে।

মাল্টিপল প্যানেলস ব্যবস্থাপনা (অতিরিক্ত কাস্টমাইজেশন):

যদি আপনি চান যে একে অপরের সাথে একাধিক প্যানেল খোলা থাকুক, তাহলে data-bs-parent অ্যাট্রিবিউটটি সরিয়ে ফেলুন।
অটো এক্সপ্যান্ড ফিচার যোগ করতে চাইলে JavaScript ব্যবহার করে স্বয়ংক্রিয়ভাবে কোনো নির্দিষ্ট প্যানেল খুলতে পারেন।

এটি আপনাকে সহজেই একাধিক একোর্ডিয়ন প্যানেল ব্যবস্থাপনা করতে সাহায্য করবে, যেখানে একসময় শুধুমাত্র একটি প্যানেল খোলা থাকবে।

Content added By

Md Azizur Rahman

Bootstrap 5 এর ট্যাবস এবং একর্ডিয়ন (Accordion) Tab Navigation তৈরি করা Dynamic Tab Content এবং Tabs Styling Accordion তৈরি এবং কনফিগার করা Accordion এর জন্য Multiple Panels ব্যবস্থাপনা

Bootstrap 5 এর ট্যাবস এবং একর্ডিয়ন (Accordion)

ট্যাবস (Tabs)

উদাহরণ: বুটস্ট্রাপ ৫ এর ট্যাবস

একর্ডিয়ন (Accordion)

উদাহরণ: বুটস্ট্রাপ ৫ এর একর্ডিয়ন

সারাংশ

Tab Navigation তৈরি করা

ট্যাব নেভিগেশন তৈরির উপাদান

উদাহরণ: বুটস্ট্রাপ ৫ এর ট্যাব নেভিগেশন

ব্যাখ্যা:

ট্যাব নেভিগেশন কাস্টমাইজেশন

ট্যাব নেভিগেশন স্টাইল কাস্টমাইজ করা:

ট্যাবের জন্য ডিফল্ট একটিভ ক্লাস পরিবর্তন:

উপসংহার

Dynamic Tab Content এবং Tabs Styling

ডাইনামিক ট্যাব কন্টেন্ট (Dynamic Tab Content)

উদাহরণ: ডাইনামিক ট্যাব কন্টেন্ট

ট্যাব স্টাইলিং (Tab Styling)

উদাহরণ: কাস্টম ট্যাব স্টাইলিং

ডাইনামিক ট্যাব কন্টেন্টের জন্য জাভাস্ক্রিপ্ট

সারাংশ

Accordion তৈরি এবং কনফিগার করা

অ্যাকর্ডিয়ন তৈরি করার উপাদান

উদাহরণ: বুটস্ট্রাপ ৫ অ্যাকর্ডিয়ন

ব্যাখ্যা:

অ্যাকর্ডিয়ন কনফিগারেশন

একাধিক প্যানেল একসাথে খোলা:

সারাংশ

Accordion এর জন্য Multiple Panels ব্যবস্থাপনা

একোর্ডিয়ন মাল্টিপল প্যানেল ব্যবস্থাপনা উদাহরণ

উদাহরণ: একোর্ডিয়ন মাল্টিপল প্যানেল ব্যবস্থাপনা

ব্যাখ্যা:

টিপস:

মাল্টিপল প্যানেলস ব্যবস্থাপনা (অতিরিক্ত কাস্টমাইজেশন):

All Notifications

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Promotion